import QtGraphicalEffects 1.0
import QtQuick.Controls 2.5
import QtQuick 2.14


import "../basic"
import "../commonUI"

Popup {
    anchors.centerIn: parent
    width: 466
    height: 638
    clip: true
    closePolicy: Popup.NoAutoClose
    background: Rectangle {
        anchors.fill: parent
        color: "#1b1b23"
        radius: 10
        border.width: 1
        border.color: "#75777f"

        Image {
            id: qrcode
            source: "qrc:/img/Resources/mainPopups/qrcode.png"
            anchors.top: parent.top
            anchors.left: parent.left
            anchors.leftMargin: -50
            anchors.topMargin: -50
            scale: 0.5
            MouseArea {
                anchors.left: parent.left
                anchors.top: parent.top
                width: 100
                height: 100
                onClicked: {
                    loginByOtherMeansPopup.close()
                    loginPopup.open()
                }
            }
        }
        // 画不规则形状
        Canvas {
            id: canvas
            anchors.fill: parent
            onPaint: {
                let ctx = canvas.getContext("2d")
                ctx.beginPath()
                ctx.moveTo(100, 0)
                ctx.lineTo(0, 100)
                ctx.lineTo(100, 100)
                ctx.lineTo(100, 0)
                ctx.fillStyle = "#1b1b23"
                ctx.fill()
            }
        }

        Image {
            id: loginClose
            source: "qrc:/img/Resources/title/close.png"
            anchors.top: parent.top
            anchors.right: parent.right
            anchors.topMargin: 30
            anchors.rightMargin: 30
            width: 40
            height: 40
            layer.enabled: false
            layer.effect: ColorOverlay {
                source: loginClose
                color: "white"
            }
            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onEntered: {
                    loginClose.layer.enabled = true
                    cursorShape = Qt.PointingHandCursor
                }
                onExited: {
                    loginClose.layer.enabled = false
                    cursorShape = Qt.ArrowCursor
                }
                onClicked: {
                    loginByOtherMeansPopup.close()
                }
            }
        }

        Row {
            id: titleRowImages
            spacing: 15
            anchors.topMargin: 100
            anchors.top: parent.top
            anchors.horizontalCenter: parent.horizontalCenter
            Image {
                anchors.topMargin: 100
                source: "qrc:/img/Resources/mainPopups/wy_hover.png"
                width: 50
                height: 50
            }
            Label {
                color: "white"
                font.bold: true
                text: qsTr("Jtom的音乐")
                font.pixelSize: 32
                font.family: BasicConfig.commFont
                anchors.verticalCenter: parent.verticalCenter
            }
        }

        Column {
            id: loginColumnItems
            anchors.top: titleRowImages.bottom
            anchors.topMargin: 40
            anchors.horizontalCenter: parent.horizontalCenter
            spacing: 40

            TextField {
                id: telNumberTextField
                width: 400
                height: 40
                font.pixelSize: height / 2
                font.family: BasicConfig.commFont
                color: BasicConfig.fieldTextColor
                placeholderText: qsTr("请输入手机号")
                placeholderTextColor: BasicConfig.defaultFontNormalColor
                verticalAlignment: Text.AlignVCenter
                leftPadding: 70
                background: Rectangle {
                    anchors.fill: parent
                    radius: telNumberTextField.height / 2
                    color: BasicConfig.fieldBgColor
                    border.width: 1
                    border.color: telNumberTextField.focus ? BasicConfig.fieldBgColor : BasicConfig.fieldBgBordColor

                    Item {
                        id: countryTextItem
                        anchors.top: parent.top
                        anchors.bottom: parent.bottom
                        anchors.left: parent.left
                        width: telNumberTextField.leftPadding
                        Row {
                            anchors.centerIn: parent
                            spacing: 5
                            Label {
                                id: countryTelNumText
                                text: "+86"
                                color: "white"
                                font.bold: true
                                font.pixelSize: 20
                                font.family: BasicConfig.commFont
                                anchors.verticalCenter: parent.verticalCenter
                            }
                            Label {
                                text: ">"
                                color: "white"
                                rotation: 90
                                font.bold: true
                                font.pixelSize: 20
                                font.family: BasicConfig.commFont
                                anchors.verticalCenter: parent.verticalCenter
                            }
                        }
                        MouseArea {
                            anchors.fill: parent
                            hoverEnabled: true
                            onEntered: {
                                cursorShape = Qt.PointingHandCursor
                            }
                            onExited: {
                                cursorShape = Qt.ArrowCursor
                            }
                            onClicked: {
                                telDataPop.open()
                            }
                        }
                    }

                    ListModel {
                        id: nationFlagsModel
                        ListElement { src:"qrc:/img/Resources/mainPopups/nationFlags/flag.png"; country:"兔子🐇"; tel:"+86" }
                        ListElement { src:"qrc:/img/Resources/mainPopups/nationFlags/mark.png"; country:"鹰酱🦅"; tel:"+87" }
                        ListElement { src:"qrc:/img/Resources/mainPopups/nationFlags/pennant.png"; country:"脚盆鸡🐥"; tel:"+88" }
                        ListElement { src:"qrc:/img/Resources/mainPopups/nationFlags/tent-banner.png"; country:"毛熊🐻"; tel:"+89" }
                    }
                    Image {
                        id: nationFlag
                        visible: false
                        source: "qrc:/img/Resources/mainPopups/nationFlags/flag.png"
                        width: 40
                        height: 40
                    }

                    Popup {
                        id: telDataPop
                        width: telNumberTextField.width
                        height: 370
                        y: telNumberTextField.height + 5
                        background: Rectangle {
                            anchors.fill: parent
                            radius: 10
                            color: "#2d2d37"
                            clip: true
                            ListView {
                                id: listview
                                anchors.fill: parent
                                anchors.topMargin: 15
                                ScrollBar.vertical: ScrollBar {
                                    anchors.right: parent.right
                                    anchors.rightMargin: 5
                                    width: 10
                                    contentItem: Rectangle {    // 设置滚动条样式
                                        visible: parent.active
                                        implicitWidth: 10
                                        radius: 4
                                        color: "#42424b"
                                    }
                                }
                                model: nationFlagsModel
                                delegate: Rectangle {
                                    height: 50
                                    anchors.left: parent.left
                                    anchors.right: parent.right
                                    anchors.rightMargin: 12
                                    color: "transparent"
                                    Image {     // 设置旗帜
                                        id: nationFlagRange
                                        anchors.left: parent.left
                                        anchors.leftMargin: 20
                                        anchors.verticalCenter: parent.verticalCenter
                                        width: nationFlag.width
                                        height: nationFlag.height
                                        source: src
                                    }
                                    Text {
                                        text: country
                                        color: "#b7b7ba"
                                        font.bold: true
                                        font.pixelSize: 20
                                        font.family: BasicConfig.commFont
                                        anchors.left: nationFlagRange.right
                                        anchors.leftMargin: 8
                                        anchors.verticalCenter: parent.verticalCenter
                                    }
                                    Text {
                                        text: tel
                                        color: "#b7b7ba"
                                        font.bold: true
                                        font.pixelSize: 20
                                        font.family: BasicConfig.commFont
                                        anchors.right: parent.right
                                        anchors.rightMargin: 50
                                        anchors.verticalCenter: parent.verticalCenter
                                    }
                                    MouseArea {
                                        anchors.fill: parent
                                        hoverEnabled: true
                                        onEntered: {
                                            parent.color = "transprent"
                                            cursorShape = Qt.PointingHandCursor
                                        }
                                        onExited: {
                                            parent.color = "#393943"
                                            cursorShape = Qt.ArrowCursor
                                        }
                                        onClicked: {
                                            countryTelNumText.text = tel
                                            telDataPop.close()
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

            TextField {
                id: pwdTextField
                width: 400
                height: 40
                font.pixelSize: height / 2
                font.family: BasicConfig.commFont
                color: BasicConfig.fieldTextColor
                placeholderText: "请输入密码"
                placeholderTextColor: BasicConfig.defaultFontNormalColor
                verticalAlignment: Text.AlignVCenter
                echoMode: TextInput.Password
                background: Rectangle {
                    anchors.fill: parent
                    radius: pwdTextField.height / 2
                    color: BasicConfig.fieldBgColor
                    border.width: 1
                    border.color: pwdTextField.focus ? BasicConfig.fieldBgColor : BasicConfig.fieldBgBordColor
                    MouseArea {
                        anchors.fill: parent
                        hoverEnabled: true

                        // 鼠标穿透，按下事件不接收，传递给父控件
                        propagateComposedEvents: true
                        onPressed: mouse.accepted = false

                        onEntered: {
                            parent.border.color = BasicConfig.fieldBgColor
                            cursorShape = Qt.IBeamCursor
                        }
                        onExited: {
                            parent.border.color = pwdTextField.focus ? BasicConfig.fieldBgColor : BasicConfig.fieldBgBordColor
                            cursorShape = Qt.ArrowCursor
                        }
                    }

                    Row {
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.right: parent.right
                        anchors.rightMargin: 20
                        spacing: 2
                        Image {
                            id: clearPwdImg
                            visible: pwdTextField.text !== ""
                            anchors.verticalCenter: parent.verticalCenter
                            source: "qrc:/img/Resources/mainPopups/clear.png"
                            width: 20
                            height: width
                            layer.enabled: false
                            layer.effect: ColorOverlay {
                                source: clearPwdImg
                                color: "#bebec0"
                            }
                            MouseArea {
                                anchors.fill: parent
                                hoverEnabled: true
                                onEntered: {
                                    clearPwdImg.layer.enabled = true
                                    cursorShape = Qt.PointingHandCursor
                                }
                                onExited: {
                                    clearPwdImg.layer.enabled = false
                                    cursorShape = Qt.ArrowCursor
                                }
                                onClicked: {
                                    pwdTextField.text = ""
                                }
                            }
                        }
                        Image {
                            id: seeEnabledImg
                            width: 20
                            height: width
                            source: seeEnabled ? "qrc:/img/Resources/mainPopups/see.png" : "qrc:/img/Resources/mainPopups/nosee.png"
                            anchors.verticalCenter: parent.verticalCenter
                            property bool seeEnabled: false
                            MouseArea {
                                anchors.fill: parent
                                hoverEnabled: true
                                onEntered: {
                                    cursorShape = Qt.PointingHandCursor
                                }
                                onExited: {
                                    cursorShape = Qt.ArrowCursor
                                }
                                onClicked: {
                                    seeEnabledImg.seeEnabled = !seeEnabledImg.seeEnabled
                                    pwdTextField.echoMode = seeEnabledImg.seeEnabled ? TextInput.Normal : TextInput.Password
                                }
                            }
                        }
                    }
                }
            }

            Item {
                id: loginItems
                height: 25
                anchors.left: pwdTextField.left
                anchors.right: pwdTextField.right

                // CheckBox
                CustomCheckBox {
                    id: checkBox
                    text: qsTr("记住密码")
                }

                Row {
                    width: 210
                    anchors.right: parent.right
                    anchors.verticalCenter: parent.verticalCenter
                    spacing: 10
                    Label {
                        id: forgetPwdLabel
                        color: "#818186"
                        text: qsTr("忘记密码")
                        font.pixelSize: 20
                        font.family: BasicConfig.commFont
                        anchors.verticalCenter: parent.verticalCenter
                        MouseArea {
                            anchors.fill: parent
                            hoverEnabled: true
                            onEntered: {
                                cursorShape = Qt.PointingHandCursor
                            }
                            onExited: {
                                cursorShape = Qt.ArrowCursor
                            }
                        }
                    }
                    Rectangle {
                        width: 1
                        height: 20
                        color: "#818186"
                        anchors.verticalCenter: parent.verticalCenter
                    }
                    Label {
                        id: checkCodeLoginLabel
                        color: "#818186"
                        text: qsTr("验证码登录")
                        font.pixelSize: 20
                        font.family: BasicConfig.commFont
                        anchors.verticalCenter: parent.verticalCenter
                        MouseArea {
                            anchors.fill: parent
                            hoverEnabled: true
                            onEntered: {
                                cursorShape = Qt.PointingHandCursor
                            }
                            onExited: {
                                cursorShape = Qt.ArrowCursor
                            }
                        }
                    }
                }
            }
        }

        // 登录按钮
        Rectangle {
            id: loginBtn
            height: 50
            width: 400
            anchors.top: loginColumnItems.bottom
            anchors.topMargin: 30
            radius: height / 2
            anchors.horizontalCenter: loginColumnItems.horizontalCenter
            gradient: Gradient {
                orientation: Gradient.Horizontal
                GradientStop {
                    color: "#e93b63"
                    position: 0
                }
                GradientStop {
                    color: "#e84f50"
                    position: 1
                }
            }
            Label {
                color: "white"
                text: "登录"
                font.pixelSize: 24
                font.family: BasicConfig.commFont
                anchors.centerIn: parent
            }
            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onEntered: {
                    loginBtn.opacity = 0.8
                    cursorShape = Qt.PointingHandCursor
                }
                onExited: {
                    loginBtn.opacity = 1
                    cursorShape = Qt.ArrowCursor
                }
            }
        }
        // 注册按键
        Label {
            id: registBtn
            color: "#818186"
            text: "注册"
            font.pixelSize: 20
            font.family: BasicConfig.commFont
            anchors.top: loginBtn.bottom
            anchors.topMargin: 20
            anchors.horizontalCenter: loginBtn.horizontalCenter
        }

        ListModel {
            id: otherMothodRowModal
            ListElement { icon: "qrc:/img/Resources/mainPopups/wx_normal.png" }
            ListElement { icon: "qrc:/img/Resources/mainPopups/QQ_normal.png" }
            ListElement { icon: "qrc:/img/Resources/mainPopups/sina_normal.png" }
            ListElement { icon: "qrc:/img/Resources/mainPopups/wy_normal.png" }
        }

        Row {
            id: otherMothodRow
            anchors.top: registBtn.bottom
            anchors.topMargin: 30
            spacing: 30
            anchors.horizontalCenter: parent.horizontalCenter
            Repeater {
                model: otherMothodRowModal
                Rectangle {
                    width: 40
                    height: width
                    color: "transparent"
                    border.width: 1
                    border.color: BasicConfig.fieldBgBordColor
                    Image {
                        id: loginMethdIcon
                        width: parent.width
                        height: parent.height
                        anchors.centerIn: parent
                        source: icon
                        layer.enabled: false
                        layer.effect: ColorOverlay {
                            source: loginMethdIcon
                            color: if (0 === index) {
                                       "#629b4a"
                                   } else if (1 === index) {
                                       "#4e8ac0"
                                   } else if (2 === index) {
                                       "#9f2c31"
                                   } else if (3 === index) {
                                       "#9f2c31"
                                   }
                        }
                    }
                    MouseArea {
                        anchors.fill: parent
                        hoverEnabled: true
                        onEntered: {
                            cursorShape = Qt.PointingHandCursor
                            loginMethdIcon.layer.enabled = true
                            if (0 === index) {
                                parent.color = "#252d28"
                                parent.border.color = "#2d3a2b"
                           } else if (1 === index) {
                                parent.color = "#222a38"
                                parent.border.color = "#263346"
                           } else if (2 === index) {
                                parent.color = "#251c24"
                                parent.border.color = "#321e26"
                           } else if (3 === index) {
                                parent.color = "#251c24"
                                parent.border.color = "#321e26"
                           }
                        }
                        onExited: {
                            cursorShape = Qt.ArrowCursor
                            loginMethdIcon.layer.enabled = false
                            parent.color = "transparent"
                            parent.border.color = BasicConfig.fieldBgBordColor
                        }
                    }
                }
            }
        }

        // 同意条款
        Item {
            anchors.top: otherMothodRow.bottom
            anchors.topMargin: 20
            anchors.left: loginBtn.left
            anchors.right: loginBtn.right
            height: 25
            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onEntered: {
                    cursorShape = Qt.PointingHandCursor
                }
                onExited: {
                    cursorShape = Qt.ArrowCursor
                }
            }

            Row {
                anchors.fill: parent
                spacing: 2
                Rectangle {
                    width: 24
                    height: width
                    radius: width / 2
                    border.width: 1
                    color: selected ? "#eb4d44" : "#transparent"
                    border.color: selected ? "#eb4d44" : BasicConfig.fieldBgBordColor
                    property bool selected: false
                    Label {
                        visible: parent.selected
                        color: "white"
                        font.bold: true
                        text: "✔"
                        font.family: BasicConfig.commFont
                        anchors.centerIn: parent
                    }
                    MouseArea {
                        anchors.fill: parent
                        hoverEnabled: true
                        onClicked: {
                            parent.selected = !parent.selected
                        }
                    }
                }
                Repeater {
                    model: [ "同意", "《服务条款》", "《隐私政策》", "《儿童隐私政策》" ]
                    Label {
                        font.bold: true
                        text: modelData
                        color: index > 0 ?  "#5d72aa" : "#8e8e92"
                        font.pixelSize: 18
                        font.family: BasicConfig.commFont
                        MouseArea {
                            anchors.fill: parent
                            hoverEnabled: true
                            onEntered: {
                                cursorShape = Qt.PointingHandCursor
                                parent.opacity = 0.8
                            }
                            onExited: {
                                parent.opacity = 1
                                cursorShape = Qt.ArrowCursor
                            }
                        }
                    }
                }
            }
        }
    }
}
